<template>
  <div
    :class="prefixCls"
    class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px gw-login-container"
  >
    <div class="relative mx-auto h-full flex gw-login-content">
      <div class="flex-1">
        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
          <LoginFormGw class="m-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
        </Transition>
      </div>
      <div class="text-14px login-footer">Copyright ©1998-2023 Tencent．All Rights Reserved．冠图科技公司版权所有</div>
    </div>
  </div>
</template>
<script lang="ts" setup>

import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app'

import { LoginFormGw } from './components'

defineOptions({ name: 'LoginGw' })

const { t } = useI18n()
const appStore = useAppStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-login;

.#{$prefix-cls} {
  overflow: auto;

  &__left {
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background-image: url('@/assets/svgs/login-bg.svg');
      background-position: center;
      background-repeat: no-repeat;
      content: '';
    }
  }
}
.gw-login-container {
  background: linear-gradient(235deg, #D9EFEC 0%, #F5F5F5 30%, #D2F2FD 100%);
  .gw-login-content {
    flex-direction: column;
    .login-footer {
      height: 96px;
      line-height: 96px;
      color: #808080;
      text-align: center;
    }
    .left-content {
      width: 50%;

    }
  }
}
</style>
